<script lang="ts" setup>//setup 

import { ref, type Component,computed } from 'vue';
import UserTab from './components/UserTab.vue';
import OrderTab from './components/OrderTab.vue';
import ProductTab from './components/ProductTab.vue';

const tabs=[
  {name:'UserTab',label:'用户管理'},
  {name:'OrderTab',label:'订单管理'},
  {name:'ProductTab',label:'商品管理'},
]
const tabComponent:{
  "UserTab":Component,
  "OrderTab":Component,
  "ProductTab":Component
}={
  "UserTab":UserTab,
  "OrderTab":OrderTab,
  "ProductTab":ProductTab,
  // UserTab,
  // OrderTab,
  // ProductTab
}
let currentTab=ref('UserTab')

//1.
// tabComponent.OrderTab
//2.
// tabComponent["OrderTab"]

let currentComponent=computed(() => tabComponent[currentTab.value])

</script>

<template>
  <div class="tab">
    <button v-for="item in tabs" :key="item.name" @click="currentTab=item.name" :class="{active:currentTab===item.name}">{{ item.label }}</button>
  </div>

  <div class="tab_content">
    <KeepAlive>
      <component :is="currentComponent"></component>
    </KeepAlive>
  </div>
</template>

<style scoped>
.tab{
  display: flex;
  justify-content: center;  /* space-around */
  gap: 10rem;
}
button{
  width: 100px;
  height: 50px;
  background-color: aquamarine;
  border-radius: 6px;
}
.active{
  background-color: blueviolet;
}
.tab_content{
  display: flex;
  justify-content: center;
  border: 1px solid skyblue;
}
</style>
